<template>
  <div >
      <!-- 首页图片 -->
      <el-image style="animation: header-effect 2s"
                class="background-image"
                v-once
                lazy
                :src="'https://liuyuyang.net/img/20ac414805e3491098df678d3d9f100f_KJCPUs.jpg'"
                fit="cover">
        <div slot="error" class="image-slot background-image-error"></div>
      </el-image>

      <div class="signature-wall myCenter my-animation-hideToShow ">
        <h1 style="color: #e5eaf3;font-family: 华光仿宋一_CNKI">欢迎你{{user.name}}</h1>
        <!--  动画  -->
        <div id="bannerWave1"></div>
        <div id="bannerWave2"></div>
        <i class="el-icon-arrow-down" @click="navigation()"></i>
      </div>

      <div id="selector" style="background-color: #f4f6f8 ;z-index: 10;position: relative" >
        <!--  文章  -->
        <div style="display: flex;margin: 0 5%">
          <!--  左边  -->
          <div  style="flex: 3;margin-left: 10px;margin-bottom: 50px;">
            <div style="display: flex; flex-direction: column;align-items: center">
              <div class="card-content1 shadow-box" style="">
                <div class="card1" v-if="user.username">
                  <img :src="user.avatar" width="150px" height="150px"
                       style="height: 150px;width: 150px;border-radius: 50%;
                      margin-top: 20px;">
                  <div style="margin-top: 20px;font-size: 20px;font-weight: bold">{{user.name}}</div>
                  <div style="margin: 20px;font-weight: bold;">{{user.introduction}}</div>
                </div>
                <div class="card1" v-if="!user.username" style="margin: 50px 0">
                  <el-button @click="$router.push('/login')" style="background-color: #ffffff;font-weight: bold">请登录</el-button>
                </div>

              </div>

              <div style="width: 380px;height: 150px;border-radius: 12px;
       background: linear-gradient(to right, rgb(53, 139, 255), rgb(21, 198, 255));
      margin-top: 50px;color: white;display: flex;" >
                <div style="margin-left: 20px;cursor: pointer" @click="clisele(1,)">
                  <p>速览</p>
                  <h1>{{categoryList[1]}}</h1>
                  <p>艺术产生魅力</p>
                </div>
              </div>

              <div style="width: 380px;height: 150px;border-radius: 12px;
       background: linear-gradient(to right, rgb(242 135 213), rgb(223 114 146));
      margin-top: 50px;color: white;display: flex;" >
                <div style="margin-left: 20px; cursor: pointer" @click="clisele(2)">
                  <p>速览</p>
                  <h1>{{ categoryList[2] }}</h1>
                  <p>记录美好生活</p>
                </div>
              </div>

              <div style="width: 380px;height: 150px;border-radius: 12px;
       background: linear-gradient(to right, rgb(226 86 124), rgb(223 140 34));
      margin-top: 50px;color: white;display: flex;" >
                <div style="margin-left: 20px;cursor: pointer" @click="clisele(4)">
                  <p>速览</p>
                  <h1>{{categoryList[4] }}</h1>
                  <p>科技改变生活</p>
                </div>
              </div>
            </div>


          </div>

          <!--  右边  -->
          <!--   右边1   -->
          <div id="one" style="flex: 7;margin-top: 50px;margin-left: 10px;position: relative" v-if="flag===false">
            <div class="article-first">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -2px;">
                <path
                    d="M224.2 472.3c-13-5.7-3.7-23.5 8.2-19 91 34 146.8 108.7 182.4 138.5 5.6 4.7 14 2.9 17.3-3.5 16.8-32 45.8-113.7-57.1-168.6-87.3-46.5-188-53.6-247.3-82.2-14.5-7-31.1 4.6-29.9 20.7 5 69.7 28.9 124.7 62.3 181.5 67.3 114.3 140.6 132.9 216.6 104 2.2-0.9 4.5-1.8 7-3 7-3.4 8.3-12.9 2.5-18.1 0.1 0-45.7-69.3-162-150.3z"
                    fill="#FFD401"></path>
                <path
                    d="M282.7 849.9c79.5-137 172.4-263.1 385.4-401.3 9.8-6.4 2.1-21.5-8.9-17.4C497.7 492.8 429.7 585 373.3 640.8c-8.7 8.7-23.4 6.3-29.1-4.6-27.2-51.8-69.5-174.1 97.3-263.1 147.7-78.8 319.9-91.4 429.7-93.3 18.9-0.3 31.5 19.4 23.3 36.4C863.7 380 842.6 478 789.9 567.6 680.8 753.1 545.5 766.7 422.2 719.8c-8.8-3.4-18.8-0.2-24 7.7-16.6 25.2-50.3 80.1-58.7 122.4-11.4 56.8-82.2 43.9-56.8 0z"
                    fill="#8BC03C"></path>
                <path
                    d="M375 419.6c-30.1 28.2-45.8 57.7-52.4 86.1 40.6 32.4 70.2 67.7 92.1 85.9 1.2 1 2.5 1.6 3.9 2.1 6.5-6.7 13.3-13.7 20.4-20.7 15.2-37.9 25.3-105.7-64-153.4zM318.8 548.2c1.6 36.1 14.7 67.6 25.5 88.1 5.7 10.9 20.3 13.3 29.1 4.6 4.9-4.9 10-10 15.1-15.4-0.6-1-1.3-2-2.2-2.8 0-0.1-20.1-30.5-67.5-74.5z"
                    fill="#8BA000"></path>
              </svg>
              发现
            </div>
            <div class="recent-post-item shadow-box background-opacity"
                 :class="{'my-animation-slide-top': index % 2 !== 0,'my-animation-slide-bottom': index % 2 === 0}"
                 v-for="(item,index) in articleSortId "   :key="item.id" v-if="index<6"
                 style="margin-bottom: 30px"
                 @click=" $router.push('/detail?id='+item.id)"
            >
              <!-- 封面 -->
              <div class="recent-post-item-image" :class="{ leftImage: index % 2 !== 0, rightImage: index % 2 === 0 }">
                <el-image class="my-el-image"
                          v-once
                          lazy
                          :src="item.articleCover || 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                          fit="cover">
                  <div slot="error" class="image-slot myCenter" style="background-color: lightGreen">
                    <div class="error-text">
                      <div>遇事不决，可问春风</div>
                    </div>
                  </div>
                </el-image>
              </div>
              <!-- 内容 -->
              <div class="recent-post-item-post" :class="{ leftImage: index % 2 === 0, rightImage: index % 2 !== 0 }">
                <!-- 时间 -->
                <div class="post-meta">
                  <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
                    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
                    <path
                        d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
                        fill="#FFFFFF"></path>
                    <path
                        d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
                        fill="#FFFFFF"></path>
                  </svg>
                  发布于 {{ item.createTime }}
                </div>
                <!-- 标题 -->

                <el-tooltip placement="top" effect="light">
                  <div slot="content">{{ item.articleTitle }}</div>
                  <h3>{{ item.articleTitle }}</h3>
                </el-tooltip>

                <!-- 信息 -->
                <div class="post-meta" style="margin-bottom: 15px">
          <span>
            <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
              <path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z"
                    fill="#FF0000"></path>
              <path
                  d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z"
                  fill="#FFFFFF"></path>
            </svg>  热度
          </span>
                  <span>
            <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
              <path
                  d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                  fill="#FFDEAD"></path>
              <path
                  d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                  fill="#FFF3DB"></path>
              <path
                  d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                  fill="#F2C182"></path>
              <path
                  d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                  fill="#69BAF9"></path>
              <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                    fill="#F7FBFF"></path>
              <path
                  d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                  fill="#D8E3F0"></path>
              <path
                  d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                  fill="#599ED4"></path>
              <path
                  d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                  fill="#3D3D63"></path>
              <path
                  d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                  fill="#3D3D63"></path>
            </svg>  条评论
          </span>
                  <span>
            <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
              <path
                  d="M510.671749 348.792894S340.102978 48.827055 134.243447 254.685563C-97.636714 486.565724 510.671749 913.435858 510.671749 913.435858s616.107079-419.070494 376.428301-658.749272c-194.095603-194.096626-376.428302 94.106308-376.428301 94.106308z"
                  fill="#FF713C"></path>
              <path
                  d="M510.666632 929.674705c-3.267417 0-6.534833-0.983397-9.326413-2.950192-16.924461-11.872399-414.71121-293.557896-435.220312-529.448394-5.170766-59.482743 13.879102-111.319341 56.643068-154.075121 51.043536-51.043536 104.911398-76.930113 160.095231-76.930114 112.524796 0 196.878996 106.48115 228.475622 153.195078 33.611515-45.214784 122.406864-148.20646 234.04343-148.20646 53.930283 0 105.46603 24.205285 153.210428 71.941496 45.063335 45.063335 64.954361 99.200326 59.133795 160.920016C935.306982 641.685641 536.758893 915.327952 519.80271 926.859589a16.205077 16.205077 0 0 1-9.136078 2.815116zM282.857183 198.75574c-46.25344 0-92.396363 22.682605-137.127124 67.413365-36.149315 36.157501-51.614541 78.120218-47.25321 128.291898 17.575284 202.089671 352.199481 455.119525 412.332023 499.049037 60.434417-42.86732 395.406538-289.147446 414.567947-492.458945 4.933359-52.344159-11.341303-96.465029-49.759288-134.88199-41.431621-41.423435-85.24243-62.424748-130.242319-62.424748-122.041544 0-220.005716 152.203494-220.989114 153.742547-3.045359 4.806469-8.53335 7.883551-14.101159 7.534603a16.257266 16.257266 0 0 1-13.736863-8.184403c-0.902556-1.587148-91.569532-158.081365-213.690893-158.081364z"
                  fill="#885F44"></path>
            </svg> {{item.recommendCount}} 点赞
          </span>
                </div>
                <!-- 内容 -->
                <div class="recent-post-desc">
                  {{ item.articleContent }}
                </div>
                <!-- 分类 标签 -->
                <div class="sort-label">
          <span style="margin-right: 12px"
                @click.stop="$router.push({path: '/sort', query: {sortId: article.sortId}})">
            <svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
              <path
                  d="M179.2 153.6m89.6 0l588.8 0q89.6 0 89.6 89.6l0 486.4q0 89.6-89.6 89.6l-588.8 0q-89.6 0-89.6-89.6l0-486.4q0-89.6 89.6-89.6Z"
                  fill="#FF9C55"></path>
              <path
                  d="M25.6 193.4208A91.0208 91.0208 0 0 1 116.6208 102.4H382.592a91.0208 91.0208 0 0 1 87.5008 65.9712l24.5504 85.7216h412.7488A91.0208 91.0208 0 0 1 998.4 345.1392v485.4528A91.0208 91.0208 0 0 1 907.3792 921.6H116.608A91.0208 91.0208 0 0 1 25.6 830.5792V193.408z"
                  fill="#FFD977"></path>
              <path
                  d="M128 665.6m25.6 0l76.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-76.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                  fill="#FFF1C9"></path>
              <path
                  d="M128 768m25.6 0l179.2 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-179.2 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                  fill="#FFF1C9"></path>
              <path
                  d="M128 486.4m51.2 0l0 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l0 0q-51.2 0-51.2-51.2l0 0q0-51.2 51.2-51.2Z"
                  fill="#FFA86A"></path>
            </svg> {{ categoryList[item.sortId] }}
          </span>
                  <span >
            <svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
              <path
                  d="M905.0112 560.4352l-342.784 342.784c-56.7808 56.7808-148.7872 56.7808-205.568 0l-231.5776-231.5776c-56.7808-56.7808-56.7808-148.7872 0-205.568l342.9376-342.9376a114.8928 114.8928 0 0 1 84.224-33.5872l266.3936 7.2192c60.7744 1.6384 109.7216 50.3808 111.5648 111.1552l8.2944 267.8272c1.024 31.6928-11.1104 62.3104-33.4848 84.6848z"
                  fill="#8C7BFD"></path>
              <path
                  d="M675.2256 491.4688c-82.176 0-149.0432-66.8672-149.0432-149.0432s66.8672-149.0432 149.0432-149.0432 149.0432 66.8672 149.0432 149.0432-66.8672 149.0432-149.0432 149.0432z m0-192.2048c-23.808 0-43.2128 19.3536-43.2128 43.2128 0 23.808 19.3536 43.2128 43.2128 43.2128 23.808 0 43.2128-19.3536 43.2128-43.2128s-19.4048-43.2128-43.2128-43.2128z"
                  fill="#FFE37B"></path>
            </svg> {{ item.tags }}
          </span>
                </div>
              </div>
            </div>
          </div>

          <!--  右边2    -->
          <div v-if="flag===true" style="flex: 7;margin-top: 50px;margin-left: 10px">

            <!--  第一个    -->
            <div>
              <!--   标题   -->
              <div>
                <div style="margin: 4px 15px;display: flex;justify-content:space-between;font-size: 20px">
                  <div style="">
                    我的故事
                  </div>
                  <div style=""></div>
                </div>
                <p style="border: 1px dashed #666;margin: 4px 15px;flex: 8"></p>
              </div>
              <!--   内容     -->
              <div style="margin-top: 20px">
                <div style="margin: 4px 15px;width: 97%;
        border-radius: 12px;display: flex;
        height: 100px;background-color: white;text-align: center;align-items: center;justify-content: center">
                  <vue-typed-js
                      :cursorChar="'☜'"
                      :typeSpeed="100"
                      :startDelay="300"
                      :loop="true"
                      :backSpeed="100"
                      :autoInsertCss="true"
                      :strings="['这是我的博客^3000', '我是浪漫主义码农','欢迎各位大佬来访']">
                    <h1 class="typing"></h1>
                  </vue-typed-js>
                </div>
              </div>

            </div>



            <!--  第二个    -->
            <div style="margin-top: 30px">
              <!--   标题   -->
              <div>
                <div style="margin: 4px 15px;display: flex;justify-content:space-between; font-size: 20px">
                  <div >
                    我的文章
                  </div>
                  <div style="cursor: pointer" @click="user.username ? $router.push('/myArticle'): $message.warning('请登录') ">更多</div>
                </div>
                <p style="border: 1px dashed #666;margin: 4px 15px;flex: 8"></p>
              </div>
              <!--   内容     -->
              <div v-if="myArticle.length===0&&user.username" style="display: flex;
          margin-top: 30px;

          text-align: center;justify-content: center">
                <a style="text-decoration: none;"  href="/addArticle">
                  <span>快去发布自己的文章吧</span>
                  <el-button style="margin-left: 20px" type="primary" icon="el-icon-edit" circle></el-button>
                </a>

              </div>
              <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(item,index) in myArticle " v-if="index<4"  :key="item.id" >
                  <div style="width: 450px;height: 300px;border-radius: 12px;
        background-color: white;margin-top: 20px;margin-left: 15px;position: relative">
                    <div class="card-image">
                      <el-image class="my-el-image"
                                v-once
                                lazy
                                :src=" item.articleCover || 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                                fit="cover">
                        <div slot="error" class="image-slot myCenter" style="background-color:lightgreen">
                          <div class="error-text">
                            <div>遇事不决，可问春风</div>
                          </div>
                        </div>
                      </el-image>
                    </div>
                    <div class="card-body">
                      <div class="card-title" @click="$router.push('/detail?id='+item.id)">
                        {{item.articleTitle}}
                      </div>
                      <div class="card-desc">
                        {{item.articleContent}}
                      </div>

                      <div class="card-time">
                        <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
                          <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
                          <path
                              d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
                              fill="#FFFFFF"></path>
                          <path
                              d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
                              fill="#FFFFFF"></path>
                        </svg>
                        {{item.createTime}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>


            <!--   第三个     -->
            <div style="margin-top: 30px">
              <!--   标题   -->
              <div>
                <div style="margin: 4px 15px;display: flex;justify-content:space-between;font-size: 20px">
                  <div style="">
                    其他文章
                  </div>
                  <div style="cursor: pointer" @click="$router.push('/moreArticle')">更多</div>
                </div>
                <p style="border: 1px dashed #666;margin: 4px 15px;flex: 8"></p>
              </div>
              <!--   内容     -->
              <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(item,index) in articleSort " v-if="index<4"  :key="item.id"  >
                  <div style="width: 450px;height: 300px;border-radius: 12px;
        background-color: white;margin-top: 20px;margin-left: 15px;position: relative">
                    <div class="card-image">
                      <el-image class="my-el-image"
                                v-once
                                lazy
                                :src=" item.articleCover || 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                                fit="cover">
                        <div slot="error" class="image-slot myCenter" style="background-color:lightgreen">
                          <div class="error-text">
                            <div>遇事不决，可问春风</div>
                          </div>
                        </div>
                      </el-image>
                    </div>
                    <div class="card-body">
                      <div class="card-title" @click="$router.push('/detail?id='+item.id)">
                        {{item.articleTitle}}
                      </div>
                      <div class="card-desc">
                        {{item.articleContent}}
                      </div>

                      <div class="card-time">
                        <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
                          <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
                          <path
                              d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
                              fill="#FFFFFF"></path>
                          <path
                              d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
                              fill="#FFFFFF"></path>
                        </svg>
                        {{item.createTime}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <!--  尾部  -->
        <div style="margin-top: 50px;position: relative;z-index: 10">
          <my-footer/>
        </div>

      </div>



  </div>
</template>

<script>
import MyFooter from "@/components/myFooter.vue";

export default {
  name: "HomeView",
  components: {MyFooter},
  data(){
    return{
      user:JSON.parse(localStorage.getItem("news") || '{}'),
      activityList: [],
      articleSortId:[],
      articleSort: [],
      myArticle:[],
      categoryList: ['大数据','前端','人工智能','文学','科技'],
      flag: true,
      id:''
    }
  },
  mounted() {

  },
  created() {

    this.selectArticleBySort()

    this.selectArticleByCurrentUserId()
  },
  methods:{
    //通过分类查询出id
    selectArticleBySort(){
      const id = Math.floor(Math.random()*5)
      this.$request.get('/boke/article/showSorted/'+id).then(res=>{
        if (res.code === 200){
          this.articleSort = res.data || []
        }
      })
    },
    //根据当前登录账号查询本人发表文章
    selectArticleByCurrentUserId(){
      console.log(this.user)
        this.$request.get('/boke/article/myArticle').then(res =>{
          this.myArticle=res.data || []
          console.log(this.myArticle)
        })
    },
    //点击查询
    clisele(locat){
      this.$request.get('/boke/article/showSorted/'+locat).then(res=>{
        if (res.code === 200){
          this.articleSortId = res.data || []
          this.$nextTick(() => {
            document.querySelector('#one').scrollIntoView({
              behavior: "smooth",
              block: "start",
              inline: "nearest"
            });
          });
          this.flag=false
          console.log(this.articleSortId)
        }
      })
    },
    navigation() {
      let pageId = document.querySelector('#selector');
      window.scrollTo({
        top: pageId.offsetTop,
        behavior: "smooth"
      });
    },
  }

}
</script>

<style scoped>

.bj{
    background: url("https://liuyuyang.net/img/20ac414805e3491098df678d3d9f100f_KJCPUs.jpg") no-repeat fixed;
    background-size: 100% 100%;
    overflow: hidden;
}

/* 居中 */
.myCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 图片 */
.background-image {
  width: 100vw;
  height: 100vh;
  /* 固定位置，不随滚动条滚动 */
  position: fixed;
  z-index: 0;
}

.background-image::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  content: '';
}


.background-image-error {
  background-color: var(--lightGreen);
  width: 100vw;
  height: 100vh;
  /* 固定位置，不随滚动条滚动 */
  position: fixed;
  z-index: -1;
}

.signature-wall {
  /* 向下排列 */
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  height: 90vh;
  overflow: hidden;
}

#bannerWave1 {
  height: 84px;
  background: url(../assets/img/bannerwave1.png) repeat-x;
  position: absolute;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

#bannerWave2 {
  height: 100px;
  background: url(../assets/img/bannerwave2.png) repeat-x;
  position: absolute;
  width: 400%;
  bottom: 0;
  z-index: 5;
  animation: gradientBG 120s linear infinite;
}

/* 背景位置移动 */
@keyframes gradientBG {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.el-icon-arrow-down {
  font-size: 40px;
  font-weight: bold;
  color: white;
  position: absolute;
  bottom: 60px;
  animation: my-shake 1.5s ease-out infinite;
  z-index: 15;
  cursor: pointer;
}

/* 下移 */
@keyframes my-shake {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }

  30% {
    opacity: 0.5;
    transform: translateY(25px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.my-animation-hideToShow {
  animation-name: hideToShow
}

/* 显示 */
@keyframes hideToShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.card-content1{
  width: 380px;
  border-radius: 12px;
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  margin-top: 50px;


}
.card1{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 背景位置移动 */
@keyframes gradientBG {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}


.my-el-image{
  width: 100%;
  height: 100%;

}

.my-el-image .image-slot {
  width: 100%;
  height: 100%;
}

.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 8px;
  color: white;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card-item {
  position: relative;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  overflow: hidden;
  margin: 10px;
  height: 300px;
  flex-shrink: 0;
  width: calc(100% / 3 - 20px);
  cursor: pointer;
  animation: zoomIn 0.8s ease-in-out;
}

.card-image {
  width: 100%;
  height: 180px;
}

.card-image >>> .el-image__inner {
  transition: all 1s;
}

.card-image >>> .el-image__inner:hover {
  transform: scale(1.2);
}

.card-body {
  padding: 10px 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.card-title:hover {
  color: lightGreen;
}

.card-desc {
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 1px;
}

.card-time {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: grey;
}

@media screen and (max-width: 700px) {
  .card-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 500px) {
  .card-item {
    width: calc(100% - 20px);
  }
}









.product-img img {
  border-radius: 7px 0 0 7px;
}

.product-info {
  float: left;
  height: 420px;
  width: 327px;
  border-radius: 0 7px 10px 7px;
  background-color: #ffffff;
}

.product-text {
  height: 300px;
  width: 327px;
}

.product-text h1 {
  margin: 0 0 0 38px;
  padding-top: 52px;
  font-size: 34px;
  color: #474747;
}

.product-text h1,
.product-price-btn p {
  font-family: 'Bentham', serif;
}

.product-text h2 {
  margin: 0 0 47px 38px;
  font-size: 13px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #d2d2d2;
  letter-spacing: 0.2em;
}

.product-text p {
  height: 125px;
  margin: 0 0 0 38px;
  font-family: 'Playfair Display', serif;
  color: #8d8d8d;
  line-height: 1.7em;
  font-size: 15px;
  font-weight: lighter;
  overflow: hidden;
}

.product-price-btn {
  height: 103px;
  width: 327px;
  margin-top: 17px;
  position: relative;
}

.product-price-btn p {
  display: inline-block;
  position: absolute;
  top: -13px;
  height: 50px;
  font-family: 'Trocchi', serif;
  margin: 0 0 0 38px;
  font-size: 28px;
  font-weight: lighter;
  color: #474747;
}

.product-price-btn button {
  float: right;
  display: inline-block;
  height: 50px;
  width: 176px;
  margin: 0 40px 0 16px;
  box-sizing: border-box;
  border: transparent;
  border-radius: 60px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffffff;
  background-color: #9cebd5;
  cursor: pointer;
  outline: none;
}

.product-price-btn button:hover {
  background-color: #79b0a1;
}
</style>